<!DOCTYPE html><html><head><title>网站中的SEO和SEM初步了解</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    

<h2 id="网站中的seo和sem初步了解">网站中的SEO和SEM初步了解</h2>

<p></p>

<h3 id="seo-和-sem-是什么">SEO 和 SEM 是什么？</h3>

<blockquote>
  <p>我们技术人员开发的产品最后总要运营推广出去，这就需要很多的运营推广手段</p>
  
  <p>SEO 和 SEM 就是两种常规的推广手段 <br>
  SEO：网络推广（以互联网为媒介） <br>
  SEM：百度竞价（只要花钱就能排名靠前的）</p>
</blockquote>

<hr>

<blockquote>
  <p>搜索引擎：百度、谷歌、360、搜狗…</p>
  
  <p>当我们在百度搜索框中输入一个关键词，下面会呈现出很多网站，有的靠前，有的靠后，如何让搜索的结果有自己的网站，而且位置还靠前，这就是SEO优化技巧需要考虑的</p>
  
  <p>1、各大搜索引擎养了一个宠物：蜘蛛（爬虫），他会每天让这个小蜘蛛去各个网站中检索内容，把一些内容或者关键词收录到自己的搜索引擎库中（记录：某某内容来自于哪个网站）</p>
  
  <p>2、当用户在搜索框中输入一个关键词，搜索引擎会通过关键词到自己词库中进行检索，把所有匹配到内容对应的网站给检索出来，并且呈现给用户（谁的关键词被检索的次数多或者其它原因，决定排名的前后）</p>
  
  <p>通过 <code>site:网站的域名</code> 可以查看出当前网站被搜索引擎收录的内容，我们也可以下载一些专门做SEO优化的工具 <code>爱站工具</code>…</p>
</blockquote>

<h3 id="对于前端开发而言我们需要注意哪些事情用来有助于seo的优化">对于前端开发而言，我们需要注意哪些事情，用来有助于SEO的优化</h3>

<blockquote>
  <p>1、给网站设置META标签以及设置TITLE（设置的内容可以找专业的推广人员要）</p>
</blockquote>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">2.</span><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">3.</span><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">4.</span>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">5.</span>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">6.</span>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">""</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">7.</span>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">""</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">8.</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">9.</span>    <span class="hljs-comment">&lt;!--
</span></div><div class="hljs-line"><span class="hljs-comment line-number">10.</span>      1、title不可以乱写，这个是很重要的一个优化技巧
</div><div class="hljs-line"><span class="hljs-comment line-number">11.</span>      2、keywords这个META标签是用来设置网站关键词的
</div><div class="hljs-line"><span class="hljs-comment line-number">12.</span>      3、description这个META标签是设置网站的描述
</div><div class="hljs-line"><span class="hljs-comment line-number">13.</span>    --&gt;
</div><div class="hljs-line"><span class="hljs-comment line-number">14.</span><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">15.</span>...
</div></code></pre>

<p><img longdesc="./1512872657142.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<blockquote>
  <p>其它常用的META标签汇总</p>
</blockquote>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs awk"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>[不管是PC还是移动端都经常使用的]
</div><div class="hljs-line"><span class="hljs-comment line-number">2.</span>http:<span class="hljs-regexp">//</span>www.zhufengpeixun.com<span class="hljs-regexp">/qianduanjishuziliao/</span>CSS3heHTML5zhuanti<span class="hljs-regexp">/2016-06-29/</span><span class="hljs-number">457</span>.html
</div><div class="hljs-line"><span class="hljs-comment line-number">3.</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">4.</span>[移动端常用的]
</div><div class="hljs-line"><span class="hljs-comment line-number">5.</span>http:<span class="hljs-regexp">//</span>www.zhufengpeixun.com<span class="hljs-regexp">/qianduanjishuziliao/</span>CSS3heHTML5zhuanti<span class="hljs-regexp">/2016-07-02/</span><span class="hljs-number">480</span>.html
</div></code></pre>

<blockquote>
  <p>2、注意代码上的优化，合理使用HTML标签，以及注意代码的SEO优化技巧 <br>
  1）标签语义化 <br>
  2）一个页面中的H1标签只能使用一次 <br>
  3）img标签都要设置 alt 属性，在这个属性中声明当前图片的信息（蜘蛛不能收录图片，但是可以抓取到图片alt属性的值） <br>
  4）HTML的层级不要太深，太深的层级，蜘蛛可能不会抓取和收录 <br>
  5）把需要推广的关键词尽可能的在页面中曝光（最好都写在H(2~6)标签中） <br>
  …</p>
</blockquote>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined">
</span></div><div class="hljs-line"><span class="hljs-comment line-number">2.</span>    .logo{
</div><div class="hljs-line"><span class="hljs-comment line-number">3.</span>        font-size:0; //=&gt;不是给用户看文字，而是给蜘蛛收录看的文字
</div><div class="hljs-line"><span class="hljs-comment line-number">4.</span>    }
</div><div class="hljs-line"><span class="hljs-comment line-number">5.</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">6.</span><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'logo'</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">7.</span>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'xxx.png'</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">'珠峰培训'</span>/&gt;</span>
</div><div class="hljs-line"><span class="hljs-comment line-number">8.</span>    珠峰培训
</div><div class="hljs-line"><span class="hljs-comment line-number">9.</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
</div></code></pre>

<blockquote>
  <p>3、尽量不要使用前后端分离，页面中的数据绑定交给后台处理（由服务器渲染页面），交给前端处理（由客户端渲染页面），渲染出来的数据，搜索爬虫是抓取不到的（在网站源码中无法看见通过客户端渲染数据的代码）</p>
  
  <p>=&gt;所有通过JS字符串拼接（ES6模板字符串、模板引擎…）绑定的数据，在网站原代码中都看不见，也就是无法被收录</p>
</blockquote>

<h3 id="所有的seo优化技巧相对于花钱做sem都是渣渣">所有的SEO优化技巧相对于花钱做SEM都是渣渣</h3>

<blockquote>
  <p>SEM：百度竞价，用户花钱做关键词排名</p>
  
  <p>百度的SEM是一个毫无节操的机制，靠竞价上位的不一定是好的东西</p>
</blockquote></div></body></html>